<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
  if (session.getAttribute("user") == null) {
    response.sendRedirect("../login.jsp");
    return;
  }
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收入管理 - 智能记账系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
  <style>
    .sidebar {
      background-color: #f8f9fa;
      min-height: calc(100vh - 56px);
    }
    .sidebar .nav-link {
      color: #333;
      padding: 12px 20px;
      border-radius: 5px;
      margin-bottom: 5px;
    }
    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: #667eea;
      color: white;
    }
    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    .table th {
      border-top: none;
      font-weight: 600;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="dashboard.jsp">
      <i class="fas fa-money-bill-wave me-2"></i>智能记账
    </a>
    <div class="navbar-nav ms-auto">
                <span class="navbar-text me-3">
                    欢迎，${user.fullName}
                </span>
      <div class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
          <i class="fas fa-user-circle"></i>
        </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="profile.jsp"><i class="fas fa-user me-2"></i>个人信息</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item" href="../logout"><i class="fas fa-sign-out-alt me-2"></i>退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <!-- 侧边栏 -->
    <div class="col-md-3 col-lg-2 sidebar p-0">
      <div class="d-flex flex-column flex-shrink-0 p-3">
        <ul class="nav nav-pills flex-column mb-auto">
          <li class="nav-item">
            <a href="dashboard.jsp" class="nav-link">
              <i class="fas fa-tachometer-alt me-2"></i>仪表板
            </a>
          </li>
          <li class="nav-item">
            <a href="income.jsp" class="nav-link active">
              <i class="fas fa-money-bill-wave me-2"></i>收入管理
            </a>
          </li>
          <li class="nav-item">
            <a href="expense.jsp" class="nav-link">
              <i class="fas fa-shopping-cart me-2"></i>支出管理
            </a>
          </li>
          <li class="nav-item">
            <a href="budget.jsp" class="nav-link">
              <i class="fas fa-chart-pie me-2"></i>预算管理
            </a>
          </li>
          <li class="nav-item">
            <a href="profile.jsp" class="nav-link">
              <i class="fas fa-user me-2"></i>个人信息
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 主内容区域 -->
    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
      <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">收入管理</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
          <a href="income-form.jsp" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>添加收入
          </a>
        </div>
      </div>

      <!-- 过滤和搜索 -->
      <div class="card mb-4">
        <div class="card-body">
          <form class="row g-3">
            <div class="col-md-3">
              <label for="monthFilter" class="form-label">月份筛选</label>
              <input type="month" class="form-control" id="monthFilter" name="monthYear" value="${param.monthYear}">
            </div>
            <div class="col-md-3">
              <label for="categoryFilter" class="form-label">收入类别</label>
              <select class="form-select" id="categoryFilter">
                <option value="">所有类别</option>
                <option value="工资">工资</option>
                <option value="兼职">兼职</option>
                <option value="奖学金">奖学金</option>
                <option value="父母汇款">父母汇款</option>
                <option value="其他">其他</option>
              </select>
            </div>
            <div class="col-md-4">
              <label for="search" class="form-label">搜索</label>
              <input type="text" class="form-control" id="search" placeholder="搜索收入描述...">
            </div>
            <div class="col-md-2 d-flex align-items-end">
              <button type="submit" class="btn btn-primary w-100">筛选</button>
            </div>
          </form>
        </div>
      </div>

      <!-- 收入统计 -->
      <div class="row mb-4">
        <div class="col-md-3">
          <div class="card bg-primary text-white">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div>
                  <h6 class="card-title">本月总收入</h6>
                  <h3>¥1,250</h3>
                </div>
                <i class="fas fa-money-bill-wave fa-2x"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-success text-white">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div>
                  <h6 class="card-title">收入笔数</h6>
                  <h3>8</h3>
                </div>
                <i class="fas fa-list fa-2x"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-info text-white">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div>
                  <h6 class="card-title">平均收入</h6>
                  <h3>¥156</h3>
                </div>
                <i class="fas fa-chart-line fa-2x"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="card bg-warning text-white">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div>
                  <h6 class="card-title">主要来源</h6>
                  <h3>父母汇款</h3>
                </div>
                <i class="fas fa-source fa-2x"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 收入列表 -->
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">收入记录</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
              <tr>
                <th>日期</th>
                <th>金额</th>
                <th>类别</th>
                <th>来源</th>
                <th>描述</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr>
                <td>2025-11-05</td>
                <td class="text-success">¥300.00</td>
                <td><span class="badge bg-primary">兼职</span></td>
                <td>家教</td>
                <td>数学家教收入</td>
                <td>
                  <a href="income-form.jsp?action=edit&incomeId=1" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-edit"></i>
                  </a>
                  <button class="btn btn-sm btn-outline-danger" onclick="deleteIncome(1)">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
              <tr>
                <td>2025-11-01</td>
                <td class="text-success">¥1000.00</td>
                <td><span class="badge bg-success">父母汇款</span></td>
                <td>父母</td>
                <td>本月生活费</td>
                <td>
                  <a href="income-form.jsp?action=edit&incomeId=2" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-edit"></i>
                  </a>
                  <button class="btn btn-sm btn-outline-danger" onclick="deleteIncome(2)">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
              <tr>
                <td>2025-10-28</td>
                <td class="text-success">¥500.00</td>
                <td><span class="badge bg-info">奖学金</span></td>
                <td>学校</td>
                <td>学业优秀奖学金</td>
                <td>
                  <a href="income-form.jsp?action=edit&incomeId=3" class="btn btn-sm btn-outline-primary">
                    <i class="fas fa-edit"></i>
                  </a>
                  <button class="btn btn-sm btn-outline-danger" onclick="deleteIncome(3)">
                    <i class="fas fa-trash"></i>
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>

          <!-- 分页 -->
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
              <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1">上一页</a>
              </li>
              <li class="page-item active"><a class="page-link" href="#">1</a></li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#">下一页</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </main>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-datepicker@1.9.0/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script>
  // 初始化日期选择器
  $('#monthFilter').datepicker({
    format: "yyyy-mm",
    startView: "months",
    minViewMode: "months",
    language: "zh-CN"
  });

  function deleteIncome(incomeId) {
    if (confirm('确定要删除这条收入记录吗？')) {
      window.location.href = '../income?action=delete&incomeId=' + incomeId;
    }
  }
</script>
</body>
</html>